<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <link rel="stylesheet" href="../css/detail.css" />
    <link rel="stylesheet" href="../less/detail.less" />
    <link rel="stylesheet" href="" />
    <link
      rel="stylesheet"
      href="../node_modules/swiper/swiper-element-bundle.js"
    />
    <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="../css/bot.css" />
    <link rel="stylesheet" href="../css/swiper.css" />
    <!-- <link rel="stylesheet" href="../node_modules/axios/lib/axios.js" /> -->
  </head>
  <body>
    <div class="foot">
      <span class="iconfont icon-shouye"> <p>首页</p></span>
      <span class="iconfont icon-gouwuche"> <p>购物车</p></span>
      <div class="active">加入购物车</div>
      <div>立即购买</div>
    </div>
    <header>
      <div>
        <i class="iconfont icon-fanhuijiantou"></i>
        <p>商品详情页</p>
      </div>
    </header>
    <!-- swiper -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
          <img src="../img/10024.jpg" width="100%" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../img/10023.jpg" width="100%" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../img/10022.jpg" width="100%" alt="" />
        </div> -->
      </div>
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <div class="main">
      <span class="iconfont icon-laba"></span>
      <div>
        <span></span>
      </div>
    </div>
    <script src="../js/swiper.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script>
      axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api/'
      const i = document.querySelector('i')
      const swie = document.querySelector('.swiper-wrapper')
      i.addEventListener('click', function () {
        location.href = '../index.html'
      })
      const swiper = axios({
        url: 'http://cba.itlike.com/public/index.php?s=/api/goods/detail',
        method: 'get',
        params: {
          goodsId: JSON.parse(localStorage.getItem('data'))
        }
      }).then(data => {
        let str = ''
        let {
          data: { data: res }
        } = data
        console.log(res)
        res.detail.goods_images.forEach(element => {
          str += `
          <div class="swiper-slide">
          <img src="${element.external_url}" width="100%" alt="" />
        </div>`
        })
        swie.innerHTML = str
      })

      const swip = document.querySelector('.swiper-slide img')

      var mySwiper = new Swiper('.swiper', {
        speed: 300,
        loop: true,
        autoplay: {
          disableOnInteraction: false
        },
        pagination: {
          el: '.swiper-pagination'
        },
        centeredSlides: true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true //修改swiper的父元素时，自动初始化swiper
      })
      // const p = document.querySelector('.main div span')
      // const min = document.querySelector('.main')
      // function notice(items) {
      //   let txt = items.find(item => item.type == 'notice')
      //   p.innerHTML = txt.params.text
      //   p.style.color = txt.style.textColor
      //   main.style.backgroundColor = txt.style.background
      // }
      const instance = axios({
        url: 'page/detail',
        method: 'get'
      })
      function getindex() {
        instance({
          url: '/page/detail'
        }).then(
          ({
            data: {
              data: { pageData: pd }
            }
          }) => {
            let { page, items } = pd
            shop.style.backgroundColor = page.style.titleBackgroundColor
            h.innerHTML = page.params.title
            ser.innerHTML = items[0].params.placeholder
            items.forEach(item => {
              if (item.type == 'banner') {
                for (let i = 0; i < ls.length; i++) {
                  ls[i].src = item.data[i].imgUrl
                }
              }
            })
            notice(items)
            menu(items)
            love(items)
            guess(items)
            content(items)
          }
        )
      }
      getindex()
    </script>
  </body>
</html>
